import {Label, Text, Dropdown} from '@kintone/kintone-ui-component/esm/js';
import {ConfigTable} from './ConfigTable';
import util from '../common/util';

export class BaseConfig {
  constructor({pluginConfig, proxyConfig, server, tableCells}) {
    this.pluginConfig = (typeof pluginConfig === 'object' && pluginConfig !== null) ? pluginConfig : {};
    this.proxyConfig = (typeof proxyConfig === 'object' && proxyConfig !== null) ? proxyConfig : {};
    this.divElements = [];
    this.server = server;
    this.companyFieldDropdown = new Dropdown({items: [{label: '--------', value: ''}], value: ''});
    this.configTable = new ConfigTable(this.server, this.pluginConfig, tableCells);
    this.apiCost = new Text({
      placeholder: 'API费用',
      value: `${this.server.ID}_apiCost` in this.pluginConfig ? this.pluginConfig[`${this.server.ID}_apiCost`] : ''
    });
  }

  render() {
    const authDiv = document.createElement('div');
    authDiv.className = 'company-info_pb_20 company-info_auth_setting';
    this.divElements.push(authDiv);

    const apiCostDiv = document.createElement('div');
    apiCostDiv.className = 'company-info_pb_20 company-info_display_flex';
    this.divElements.push(apiCostDiv);
    apiCostDiv.appendChild(new Label({text: `单次调用${this.server.NAME}API的费用（元）`}).render());
    apiCostDiv.appendChild(this.apiCost.render());

    const companyNameDiv = document.createElement('div');
    companyNameDiv.className = 'company-info_pb_20 company-info_display_flex company-info_company_name';
    this.divElements.push(companyNameDiv);
    companyNameDiv.appendChild(new Label({
      text: `${this.server.NAME}检索用 公司名字段`,
      isRequired: true
    }).render());
    companyNameDiv.appendChild(this.companyFieldDropdown.render());

    const configTableDiv = document.createElement('div');
    configTableDiv.className = 'company-info_config_table';
    this.divElements.push(configTableDiv);
    configTableDiv.appendChild(this.configTable.render());

    const div = document.createElement('div');
    this.divElements.forEach(ele => {
      div.appendChild(ele);
    });
    return div;
  }

  setValue(kintoneConfigHelperFields) {
    this.appFields = {};
    kintoneConfigHelperFields.forEach(field => {
      if ('subtableCode' in field) {
        return;
      }

      if (field.type in this.appFields) {
        this.appFields[field.type].push(field);
      } else {
        this.appFields[field.type] = [field];
      }
    });

    if ('SINGLE_LINE_TEXT' in this.appFields) {
      const companyFieldValue =
        `${this.server.ID}_companyField` in this.pluginConfig ? this.pluginConfig[`${this.server.ID}_companyField`] : '';
      this.appFields.SINGLE_LINE_TEXT.forEach(field => {
        this.companyFieldDropdown.addItem({label: field.label, value: field.code});
        if (companyFieldValue === field.code) {
          this.companyFieldDropdown.setValue(companyFieldValue);
        }
      });
    }

    this.configTable.setValue(this.appFields);
  }

  checkValue() {
    if (util.isEmptyString(this.companyFieldDropdown.getValue())) {
      return `请选择 "${this.server.NAME}检索用 公司名字段"`;
    }

    return this.configTable.checkDuplicateValue();
  }

  buildNewConfigValue() {
    const newConfigValue = {};
    newConfigValue[`${this.server.ID}_companyField`] = this.companyFieldDropdown.getValue();
    newConfigValue[`${this.server.ID}_apiCost`] = this.apiCost.getValue();

    return {
      ...newConfigValue,
      ...this.configTable.getValue()
    };
  }

  hide() {
    this.divElements.forEach(div => {
      div.style.cssText = 'display: none';
    });
  }

  show() {
    this.divElements.forEach(div => {
      div.style.cssText = '';
    });
  }
}